<script setup lang="ts">
import { ref } from "vue";
const isMenuOpen = ref(false);
</script>

<template>
  <header class="my-header sticky top-0 z-10">
    <div class="container mx-auto px-4 py-2 flex justify-between items-center">
      <img src="@/assets/home/logo.png" class="w-15" />
      <nav class="hidden md:flex space-x-6">
        <router-link to="/blog" class="block py-2 hover:text-blue-500">博客</router-link>
        <a href="#" class="hover:text-blue-500">Contact</a>
      </nav>
      <button class="md:hidden text-xl focus:outline-none" @click="isMenuOpen = !isMenuOpen">
        ☰
      </button>
    </div>
    <!-- 移动菜单 -->
    <div v-show="isMenuOpen" class="md:hidden bg-white p-4 shadow-inner">
      <router-link to="/blog" class="block py-2 hover:text-blue-500">博客</router-link>
      <a href="#" class="block py-2 hover:text-blue-500">关于</a>
      <a href="#" class="block py-2 hover:text-blue-500">Contact</a>
    </div>
  </header>
</template>

<style>
.my-header {
  font-family: "YunFengHanChanTi", sans-serif;
  font-size: 25px;
}
</style>
